<template>
	<view class="index bgf h100">
		<view class="head">
			<image class="icon" src="/static/logo.png" :showLoading="true" :src="logo" width="110rpx" height="110rpx">
			</image>
			<view class="title"> 成妃 </view>
		</view>

		<view class="m-t-50 m-b-50 flex-item-center">
			<view class="m-r-60 font-30" v-for="(item, index) in typeList" :key="index"
				:style="{color:tabIndex==index?'#3C3C3D':'#6E6F70'}" :class="tabIndex == index ? 'font-38' : 'c9'"
				@click="typeChange(index)">{{ item.label }}</view>
		</view>

		<u--form :model="form" :rules="rules" ref="uForm" errorType="toast">
			<u-form-item prop="phoneNumber">
				<view class="password_box" id="phoneNumber">
					<u--input id="phoneNumber" ref="phoneNumber"
						:class="[isSelected==='phoneNumber' ? 'input_selected' : '']" holdKeyboard border="none"
						@blur="blur" placeholder="请输入手机号" :focus="focusItem.phoneNumber" @focus="focus('phoneNumber')"
						maxlength="11" v-model="form.phoneNumber"></u--input>
					<image v-if="focusItem.phoneNumber&&form.phoneNumber.length>0" class="close"
						@click="clearInput('phoneNumber')" src="/static/clear.png"></image>
				</view>
			</u-form-item>

			<!-- <u-form-item prop="smsCode" v-if="tabIndex == 0">
				<view class="flex-justify-between w100" style="margin-top: 20rpx">
					<view class="password_box">
						<u--input :class="[isSelected == 'smsCode' ? 'input_selected' : '']" holdKeyboard @blur="blur"
							placeholder="请输入验证码" :focus="focusItem.smsCode" @focus="focus('smsCode')" border="none"
							v-model="form.smsCode" type="number">
						</u--input>
						<image v-if="focusItem.smsCode&&form.smsCode.length>0" class="close"
							@click="clearInput('smsCode')" src="/static/clear.png"></image>
					</view>
					<view class="">
						<u-code :disabled="showSmsCode" ref="uCode" @change="codeChange" seconds="60"
							changeText="XS"></u-code>
						<u-button class="smsCodeBtn" :style="{color:showSmsCode?'gray !important':''}"
							:disabled="showSmsCode" @tap="getCode" type="primary" plain :text="tips"
							size="small"></u-button>
					</view>
				</view>
			</u-form-item> -->
			<u-form-item prop="password" v-if="tabIndex == 0">
				<view class="password_box" :key="showPassword+'1'">
					<u--input :class="[isSelected == 'password' ? 'input_selected' : '']" border="none"
						:customStyle="{ marginTop: '10px',fontSize:'16rpx' }" @focus="focus('password')" @blur="blur"
						placeholder="请输入密码" holdKeyboard v-model="form.password" ref="password"
						:password="!showPassword"></u--input>
					<image @click="changeVisible" :src="`/static/${showPassword?'visible':'not_visible'}.png`"></image>
				</view>

			</u-form-item>
		</u--form>
		<view class="flex-item-center m-t-50">
			<view class="">
				<u-checkbox-group size="14" v-model="radiovalue" shape="circle" placement="column">
					<u-checkbox> </u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="c9 font-24">
				我已阅读并同意<text class="baseColor" @click="gotoProtocol('customer')">用户协议</text>和<text class="baseColor"
					@click="gotoProtocol('secret')">隐私协议</text>
			</view>
		</view>
		<view class="m-t-50">
			<u-button type="primary" text="登录" @click="submit"
				:customStyle="{ borderRadius: '16rpx', height: '88rpx' }"></u-button>
		</view>
		<view class="flex space-between">
			<view class="c9 m-t-50 register">还没有账号？
				<text class="baseColor" @click="gotoRegister">注册账号</text>
			</view>
			<view class="c9 m-t-50 ">
				<text @click="gotoForgetPassword">忘记密码？</text>
			</view>
		</view>

		<!-- 		<view class="wx_login" @click="wxLogin">
			<image class="wx_icon" src="/static/ic_wechat.png" />
			微信登录
		</view> -->
		<u-modal :show="show" @confirm="agree" @cancel="show=false" confirmText="同意并继续" title="用户协议与隐私协议"
			cancelText="不同意" showCancelButton>
			<view class="modal_text">
				<view>(1)《隐私协议》中关于个人设备用户信息的收集和使用的说明。</view>
				<view>(2)《隐私协议》中与第三方SDK类服务商数据共享、相关信息收集和使用说明。</view>
				<view>用户协议和隐私政策说明:</view>
				<view class="">
					阅读完整的<text class="baseColor" @click="gotoProtocol('customer')">《用户协议》</text>和<text class="baseColor"
						@click="gotoProtocol('secret')">《隐私协议》</text>
				</view>

			</view>

		</u-modal>
	</view>
</template>

<script>
	import {
		md5
	} from "@/utils/tools.js";
	export default {
		data() {
			return {
				logo: require("@/static/logo.png"),
				typeList: [
					// {
					// 	label: "验证码登录",
					// 	value: 1,
					// },
					{
						label: "密码登录",
						value: 2,
					},
				],
				tabIndex: 0,
				radiovalue: [],
				isSelected: null,
				tips: "",
				form: {
					phoneNumber: "",
					password: "",
					// smsCode: "",
				},
				imei: null,
				rules: {
					phoneNumber: [{
							required: true,
							message: "请输入手机号",
							trigger: ["change", "blur"],
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: "手机号码不正确",
							trigger: ["change", "blur"],
						},
					],
					password: {
						type: "string",
						required: true,
						message: "请填写密码",
						trigger: ["blur", "change"],
					},
					smsCode: {
						type: "string",
						required: true,
						message: "请填写验证码",
						trigger: ["blur", "change"],
					},
				},
				systemInfo: {},
				showPassword: false,
				show: false,
				focusItem: {
					phoneNumber: false,
					smsCode: false
				},
				old: {
					focusItem: {
						phoneNumber: false,
						smsCode: false
					},
				}
			};
		},
		computed: {
			showSmsCode: function() {
				return this.$u.test.mobile(this.form.phoneNumber) ? false : true
			}
		},
		onLaunch(){
			
		},
		// onBackPress() {
		// 	return true;
		// },
		onLoad() {
			if (uni.getStorageSync("token")) {
				uni.switchTab({
					url: "/views/home/index",
				});
			}


		},
		methods: {
			typeChange(index) {
				this.tabIndex = index;
				this.form.password = "";
				this.form.smsCode = "";
			},
			codeChange(text) {
				this.tips = text;
			},
			changeVisible() {
				this.showPassword = !this.showPassword;
			},
			focus(name) {
				this.isSelected = name;
				this.focusItem[name] = true;
				for (let key in this.focusItem) {
					this.focusItem[key] = key == name ? true : false
				}
			},
			agree() {
				this.show = false;
				this.radiovalue = ['']
			},
			// keyboardheightchange(e) {
			// 	console.log(e)
			// 	this.blur()
			// },
			blur(e) {
				setTimeout(() => {
					for (let key in this.focusItem) {
						this.focusItem[key] = false
					}
					this.isSelected = null;
				}, 0)

			},
			clearInput(refName) {
				this.focusItem[refName] = false
				this.form[refName] = ""
				this.$nextTick(() => {
					this.focusItem[refName] = true
				})
			},
			getCode() {
				const {
					phoneNumber
				} = this.form;
				if (!phoneNumber) return this.$u.toast("请输入手机号");

				if (this.$refs.uCode.canGetCode) {
					uni.showLoading({
						title: "正在获取验证码",
					});
					this.$api.login
						.sendSMS({
							phoneNumber,
						})
						.then(() => {
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast("验证码已发送");
							this.$refs.uCode.start();
						})
						.finally(() => {
							uni.hideLoading();
						});
				} else {
					uni.$u.toast("请等待倒计时结束后再发送验证码");
				}
			},
			submit() {
				this.$refs.uForm.validate().then((res) => {
					//if (!this.radiovalue.length) return this.$u.toast("请先勾选用户协议");
					// if (!this.radiovalue.length) {
					// 	this.show = true
					// 	return
					// };
					
					
					if (this.tabIndex == 0) {
						this.$api.login
							.login({
								phone:this.form.phoneNumber,
								password:this.form.password,
								// ...this.form,
								
								loading: true
							})
							.then((res) => {
								const {
									code,
									msg,
									data
								} = res;
								console.log(res)
								uni.setStorageSync("token", data?.token);
								uni.setStorageSync("user", JSON.stringify(data));
								uni.showToast({
									title: "登录成功",
									icon: "none",
									duration: 2000,
								});
								uni.switchTab({
									url: "/views/home/index",
								});
								
							});
					} else {
						this.$api.login
							.phoneNumberLogin({
								...this.form,
								imeiCode: md5(this.imei),
								// imeiCode: 'FB924C6C-9C29-412F-84CF-9C5144C28DC1',
								//FB924C6C-9C29-412F-84CF-9C5144C28DC1
								//'409f8c64-4dc3-42d0-be86-8c36c632035a'
								//'6622CCBC-00A2-4321-9494-284D69D9129D'
								mobileType: "苹果7",
								systemType: version,
								terminal: uni.getSystemInfoSync().platfor == "ios" ? 1 : 2,
								versionCode: appVersionCode,
								versionName: appVersion,
								loading: true
							})
							.then((res) => {
								const {
									code,
									msg,
									data
								} = res;
								console.log(res)
								if (code == 0) {
									uni.setStorageSync("token", data?.token?.token);
									uni.setStorageSync("user", JSON.stringify(data?.user));
									uni.setStorageSync("code", data?.code);
									uni.showToast({
										title: "登录成功",
										icon: 'none',
										duration: 2000,
									});
									uni.switchTab({
										url: "/views/home/index",
									});
								} else {

									uni.showToast({
										title: msg,
										icon: 'none'
									})
									this.$u.toast(msg);
									if (code === 10021) {
										uni.removeStorageSync('user');
										uni.removeStorageSync('token');
										uni.removeStorageSync('userInfo');
										uni.removeStorageSync('code');
										uni.removeStorageSync('vipInfo');
										uni.reLaunch({
											url: '/views/login/index'
										})
									}

								}
							});
					}
				});
			},
			wxLogin() {
				uni.login({
					provider: "weixin",
					onlyAuthorize: true, // 微信登录仅请求授权认证
					success: function(event) {
						const {
							code
						} = event;
						//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
					},
					fail: function(err) {
						// 登录授权失败
						// err.code是错误码
					},
				});
			},
			gotoRegister() {
				uni.navigateTo({
					url: "/views/login/register",
				});
			},
			gotoForgetPassword() {
				uni.navigateTo({
					url: "/views/login/forget",
				});
			},
			gotoProtocol(type) {
				uni.navigateTo({
					url: "/views/login/protocol?type=" + type,
				});
			},
		},
		watch: {
			radiovalue(newProps, oldProps) {
				if (this.radiovalue.length > 0 && !this.imei) {
					this.platform = uni.getDeviceInfo().platform;
					if (this.platform === 'ios') {
						plus.device.getInfo({
							success: (e) => {
								this.imei = e.imei.split(",")[0];
							},
							fail: (e) => {
								console.log(e);

							},
						});
					} else {
						plus.device.getOAID({
							success: (even) => {
								this.imei = even.oaid;
							},
							fail: (even) => {
								console.log(even);
							},
						});
					}
					this.systemInfo = uni.getSystemInfoSync();
				}
			}
		}

	};
</script>

<style lang="scss" scoped>
	::v-deep .u-input {
		padding: 30rpx !important;
		background: #fafafa;
		border: 1rpx solid white;
		border-radius: 8rpx;
		height: 88rpx;
		box-sizing: border-box;
	}

	.icon {
		border-radius: 32rpx;
		overflow: hidden;
		width: 110rpx;
		height: 110rpx;
	}

	.modal_text {
		display: flex;
		flex-direction: column;

		>view {
			text-align: left;
			padding: 10rpx 0;
		}
	}

	.password_box {
		width: 100%;
		position: relative;

		::v-deep .u-input {
			padding-right: 60rpx !important;
		}

		.close {
			position: absolute;
			right: 20rpx;
			top: calc(50% - 20rpx);
			width: 40rpx;
			height: 40rpx;
		}

		>image {
			position: absolute;
			right: 20rpx;
			top: calc(50% - 10rpx);
			width: 40rpx;
			height: 40rpx;
		}
	}

	.register {
		flex-grow: 1;
		// text-align: center;
	}

	.wx_login {
		height: 120rpx;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #6e6f70;

		.wx_icon {
			width: 64rpx;
			height: 64rpx;
			padding-bottom: 20rpx;
		}
	}

	.m-t-50 {
		margin-top: 32rpx !important;
	}

	.smsCodeBtn {
		width: 220rpx;
		background: #fafafa;
		border: none;
		height: 88rpx;
		margin-left: 20rpx;
	}

	.input_selected {
		border: 3rpx solid #3392ff;
		background: #F5FAFF;
	}

	::v-deep .u-form-item__body {
		padding: 0 !important;
	}

	.head {
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.title {
		color: #3c3c3d;
		font-size: 40rpx;
		padding: 16rpx;
		font-weight: bold;
	}

	.regiter {
		flex-grow: 1;
	}

	.index {
		height: 100%;
		// background: white;
		padding: 140rpx 50rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}
</style>